<template>
  <div class="EquipmentManage">
    <el-card class="box-card">
      <div class="search-box">
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="newAdd"
        >{{ $t('add') }}</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-refresh-left"
          plain
          @click="refresh"
        >{{ $t('refresh') }}</el-button>
        <el-button
          type="primary"
          icon="el-icon-folder-checked"
          plain
          @click="doSave"
        >{{ $t('saveLocation') }}</el-button>
      </div>
      <div id="content" style="border: 1px solid #ccc; padding: 0;position: relative">
        <div
          v-drag
          v-for="i in drayList"
          :style="{ left: i.left + 'px', top: i.top + 'px' }"
          :key="i.id"
          style="
              width: 100px;
              height: 100px;
              border: 1px solid #ccc;
              position: absolute;
              cursor: pointer;"
          class="dragBox"
          @dblclick="delItem(i)">
          <span class="dragName">{{ i.eqpName }}</span>
        </div>
      </div>
    </el-card>
    <addDialog ref="addForm" @getLayoutEqps="getLayoutEqps" />
  </div>
</template>
<script>
import layoutApi from '@/api/production/layoutDesign'
import mySetting from '@/mixins/mySetting'
import addDialog from './components/addDialog'
export default {
  name: 'EquipmentManage',
  inject: ['reload'],
  components: {
    addDialog
  },
  directives: {
    drag: {
      inserted: function(el) {
        const content = document.getElementById('content')
        var minX = 0
        var minY = 0
        var maxX = content.offsetWidth - el.offsetWidth
        var maxY = content.offsetHeight - el.offsetHeight
        el.onmousedown = function() {
          // 鼠标按下时获取鼠标与元素之间的距离   offsetX/Y 指的是鼠标与触发事件的元素之间的距离
          var mouseX = event.offsetX
          var mouseY = event.offsetY
          window.onmousemove = function() {
            // 元素与页面间的距离 = 鼠标与页面之间的距离 - 鼠标与元素之间的距离-侧边栏的宽度
            var targetX = event.pageX - mouseX - content.offsetLeft - 207
            var targetY = event.pageY - mouseY - content.offsetTop
            if (targetX <= minX) {
              targetX = minX
            } else if (targetX >= maxX) {
              targetX = maxX
            }
            if (targetY <= minY) {
              targetY = minY
            } else if (targetY >= maxY) {
              targetY = maxY
            }
            el.style.left = targetX + 'px'
            el.style.top = targetY + 'px'
          }
          window.onmouseup = function() {
            // 解绑移动事件
            window.onmousemove = null
          }
        }
      }
    }
  },
  mixins: [mySetting],
  data() {
    return {
      drayList: [],
      isLoading: false
    }
  },
  created() {
    this.getLayoutEqps()
  },
  methods: {
    refresh() {
      this.reload()
    },
    // 新增
    newAdd() {
      this.$refs.addForm.openDialog()
    },
    // 获取区域机台位置
    async getLayoutEqps() {
      const res = await layoutApi.getLayoutEqps({
        LayoutId: this.$route.params.LayoutId
      })
      this.drayList = res.data
    },
    // 保存位置
    doSave() {
      const arr = [...document.getElementsByClassName('dragBox')]
      let layoutId = ''
      const updateEqpList = []
      this.drayList.forEach((ele, i) => {
        layoutId = ele.layoutId
        updateEqpList.push({
          eqpId: ele.eqpId,
          id: ele.id,
          width: arr[i].offsetWidth,
          height: arr[i].offsetHeight,
          left: arr[i].offsetLeft,
          top: arr[i].offsetTop
        })
      })
      layoutApi.saveLocation({ layoutId, updateEqpList }).then((res) => {
        this.doMerge(res)
      })
    },
    // 双击删除事件
    delItem(val) {
      this.$confirm(
        `<p>${this.$t('unrecoverableAfterDeletion')}</p>`,
        this.$t('tip'),
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        layoutApi.deleteItem({ ids: [val.id] }).then((res) => {
          this.doMerge(res)
          this.setOnePage()
          this.getLayoutEqps()
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.EquipmentManage{
  padding-bottom: 33px;
}
#content {
  width: 1200px;
  height: 1200px;
  background-color: #fff;
}
.search-box {
  height: 50px;
}
.dragBox {
  display: flex;
  justify-content: center;
  align-items: center;
  .dragName {
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
